const gulp = require('gulp');
const fileinclude = require('gulp-file-include');
const htmlmin = require('gulp-htmlmin');
const sass = require('gulp-sass')(require('sass'));
const cleanCss = require('gulp-clean-css');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const del = require('del');
const browsersync = require('browser-sync').create();


//创建html转存任务
gulp.task('movehtml', async() => {
  gulp.src(['./src/*.html'])
  .pipe(fileinclude({
    prefix: '@@',
    basepath: '@file'
  }))
  .pipe(gulp.dest('./dist'));
});

gulp.task('movecomponents', async() => {
  gulp.src(['./src/modules/*.html'])
  .pipe(fileinclude({
    prefix: '@@',
    basepath: '@file'
  }));
});
gulp.task('movecicon', async() => {
  gulp.src(['./src/favicon.ico'])
  .pipe(gulp.dest('./dist'));
});
//创建scss转存任务
gulp.task('movescss', async() => {
  gulp.src(['./src/sass/*.scss', './src/sass/modules/*.scss'])
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('./dist/css'));
});

//开启gulp服务器
gulp.task('browserSync', async() => {
  browsersync.init({
    server: {
      baseDir: './'
    },
    port: 80
  })
});

//实时刷新
function browserSyncReload() {
  browsersync.reload();
}

//创建js转存任务
gulp.task('movepagejs', async() => {
  gulp.src(['./src/js/*.js'])
  .pipe(gulp.dest('./dist/js'));
});

gulp.task('movenetworkjs', async() => {
  gulp.src(['./src/js/network/*.js'])
  .pipe(gulp.dest('./dist/js/network'));
});
gulp.task('moveheaderjs', async() => {
  gulp.src(['./src/js/header/*.js'])
  .pipe(gulp.dest('./dist/js/header'));
});
gulp.task('moveutilsjs', async() => {
  gulp.src(['./src/js/utils/*.js'])
  .pipe(gulp.dest('./dist/js/utils'));
});
gulp.task('moveasideshortcutjs', async() => {
  gulp.src(['./src/js/asideShortcut/*.js'])
  .pipe(gulp.dest('./dist/js/asideShortcut'));
});

gulp.task('movejs', gulp.series(['moveutilsjs', 'movepagejs', 'movenetworkjs', 'moveheaderjs', 'moveasideshortcutjs']));

//监听
gulp.task('watch', async() => {
  gulp.watch(['./src/*.html', './src/components/*.html'], gulp.series(['movehtml']));
  gulp.watch(['./src/sass/*.scss', './src/sass/modules/*.scss'], gulp.series(['movescss']));
  gulp.watch(['./src/js/*.js', './src/js/network/*.js', './src/js/utils/*.js', './src/js/header/*.js', './src/js/asideShortcut/*.js'], gulp.series(['movejs']));
});

//默认任务
gulp.task('default', gulp.series(['movecicon', 'movehtml', 'movescss', 'movejs', 'watch']));


//删除dist目录文件
function clearDir(done) {
  del(['./dist/**/*']);
  setTimeout(() => {
    done();
  }, 1000);
}

//打包压缩html
gulp.task('buildhtml', async() => {
  gulp.src(['./src/*.html'])
  .pipe(fileinclude({
    prefix: '@@',
    basepath: '@file'
  }))
  .pipe(htmlmin({ collapseWhitespace: true }))
  .pipe(gulp.dest('./dist'));
});

//打包压缩css
gulp.task('buildcss', async() => {
  gulp.src(['./src/sass/*.scss'])
  .pipe(sass().on('error', sass.logError))
  .pipe(cleanCss({compatibility: 'ie8'}))
  .pipe(gulp.dest('./dist/css'));
});

//打包压缩js
gulp.task('buildmainjs', async() => {
  gulp.src(['./src/js/*.js'])
  .pipe(uglify())
  .pipe(gulp.dest('./dist/js'));
});
gulp.task('buildasidejs', async() => {
  gulp.src(['./src/js/asideShortcut/*.js'])
  .pipe(uglify())
  .pipe(gulp.dest('./dist/js/asideShortcut'));
});
gulp.task('buildheaderjs', async() => {
  gulp.src(['./src/js/header/*.js'])
  .pipe(uglify())
  .pipe(gulp.dest('./dist/js/header'));
});
gulp.task('buildnetworkjs', async() => {
  gulp.src(['./src/js/network/*.js'])
  .pipe(uglify())
  .pipe(gulp.dest('./dist/js/network'));
});
gulp.task('buildutils', async() => {
  gulp.src(['./src/js/utils/*.js'])
  .pipe(uglify())
  .pipe(gulp.dest('./dist/js/utils'));
});
gulp.task('buildjs', gulp.series(['buildmainjs', 'buildasidejs', 'buildheaderjs', 'buildnetworkjs', 'buildutils']));

// //打包总任务
gulp.task('build', gulp.series([clearDir, 'buildhtml', 'buildcss', 'buildjs']));